<template>
  <div>
     <!-- <div class="w_home">
       <h2>用户总览</h2>
        <ul>
          <li><p>今日新增(人)</p><span>100</span> </li>
           <li><p>昨日新增(人)</p><span>200</span></li>
            <li>
              <p>本月新增(人)</p>
              <span>1000</span>
           </li>
            <li>
              <p>用户总数(人)</p>
              <span>5000</span>
           </li>
        </ul>
     </div> -->
     <ul class="w_entrance">
       <h2>快捷入口</h2>
       <li @click="showIndex('index')">
        <Icon type="ios-analytics" />
         <span>大数据展示中心</span>
       </li>
        <li @click="showIndex('car')">
        <Icon type="md-car" />
         <span>车辆信息</span>
       </li>
       <li @click="showIndex('order_center')">
       <Icon type="md-reorder" />
         <span>订单监管</span>
       </li>
       <li @click="showIndex('organ')">
        <Icon type="md-clipboard" />
         <span>编制管理</span>
       </li>
        <li @click="showIndex('User')">
        <Icon type="ios-people" />
         <span>账号管理</span>
       </li>
     </ul>
      <ul class="w_entrance">
       <h2>消息发布</h2>

      <li @click="showHome()">
        <Icon type="ios-analytics" />
         <span>大数据展示中心</span>
       </li>

        <li @click="showIndex('notice_apply')">
       <Icon type="md-text" style="color:#FF576E;"/>
         <span>发布告布</span>
       </li>
       <li @click="showIndex('info_apply')">
       <Icon type="md-information-circle" style="color:#30C3F9;" />
         <span>发布消息</span>
       </li>
        
     </ul>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie,  ChartBar ,BarStrip,ChartMap,ChartCircle,ChartDoubar} from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    BarStrip,
    Example,
    ChartMap,
    ChartCircle,
    ChartDoubar
  },
  data () {
    return {
      
    }
  },
  methods:{
    showHome(){
      //this.showhome = false;
      this.$router.push({
              name: "car"
            });
    },
    showIndex(x){
      this.$router.push({
              name: x
            });
    },

  },
  mounted () {
  }
}
</script>

<style lang="less">
body{
  background-color:#F5F7F9;
}
ul,li{
  margin:0;
  padding:0;
  border:none;
}
li{
  list-style:none;
}
.w_home{
  width:100%;
  overflow:hidden;
  margin:0 auto;
  background-color:#fff;
  padding-bottom:20px;
}
.w_home h2{
  border-bottom:solid 1px #ececec;
  line-height:50px;
  font-size:18px;
  text-indent:1em;
}
.w_home ul{
  width:96%;
  height:auto;
  margin:0 auto;
  margin-top:10px;
  background-color:#F5F5F5;
}
.w_home ul li{
   background-color:#F5F5F5;
  width:25%;
  text-align:center;
  float:left;
  position:relative;
  padding-top:10px;
  padding-bottom:10px;
}
.w_home ul li::after{
  content:'';
  position:absolute;
  width:1px;
  height:50px;
  right:0;
  top:50%;
  margin-top:-25px;
  background-color:#ddd;
}
.w_home ul li p{
  color:#999;
  line-height:40px;
  font-size:14px;
}
.w_home ul li span{
  font-weight:bolder;
  font-size:16px;
  
}
.w_entrance{
  width:100%;
  height:auto;
  text-align:left;
  margin-top:36px;
}
.w_entrance h2{
 font-weight:normal;
 font-size:16px;
 margin-bottom:20px;
}
.w_entrance li{
  background-color:#fff;
  width:19%;
  height:auto;
  display:inline-block;
  padding-top:20px;
  padding-bottom:20px;
  margin-right:0.3%;
  cursor:pointer;
  transition:box-shadow 0.5s;
-moz-transition:box-shadow 0.5s; /* Firefox 4 */
-webkit-transition:box-shadow 0.5s; /* Safari and Chrome */
-o-transition:box-shadow 0.5s; /* Opera */
}
.w_entrance li i{
  text-align:center;
  width:100%;
  font-size:60px;
  color:#F7D569;
}
.w_entrance li span{
  width:100%;
  display:block;
  text-align:center;
  font-size:16px;
  color:#333;
  line-height:50px;
}
.w_entrance li:hover{
box-shadow:-1px 3px 20px rgba(0,0,0,0.3);

}
.w_entrance li:nth-child(2) i{
color:#F7D569;
}
.w_entrance li:nth-child(3) i{
color:#6ed7b3;
}
.w_entrance li:nth-child(4) i{
color:#afc2ee;
}
.w_entrance li:nth-child(5) i{
color:#eeab9f;
}
.w_entrance li:nth-child(6) i{
color:#78D6E2;
}

</style>
